<template>
	<div class="container">
		<div class="full-list">
			<ul>
				<li class="list-info-view-childen" v-for="(row, index) in PremisesCityList">
					<div class="import-title" :id="'anchor'+row.cityFirEn">{{row.cityFirEn}}</div>
					 <!-- v-bind:id="'anchor'+row.cityFirEn" -->
					<ul>
						<li class="view-childen-list" v-for="row1 in row.preCityList" @click="goToIndex(row1.cityId,row1.cityName)">{{row1.cityName}}</li>
					</ul>
				</li>
			</ul>
			<div class="quick-label">
				<a href="javascript:void(0)"  @click="goAnchor('#anchorA')">A</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorB')">B</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorC')">C</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorD')">D</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorE')">E</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorF')">F</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorG')">G</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorH')">H</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorI')">I</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorJ')">J</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorK')">K</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorL')">L</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorM')">M</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorN')">N</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorO')">O</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorP')">P</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorQ')">Q</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorR')">R</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorS')">S</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorT')">T</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorU')">U</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorV')">V</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorW')">W</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorX')">X</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorY')">Y</a>
				<a href="javascript:void(0)"  @click="goAnchor('#anchorZ')">Z</a>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'dynamic',
		data() {
			return {
				PremisesCityList:[]
			}
		},
		components: {},
		mounted: function() {
			this.initPremisesCityList();
			this.gapBetween();
		},
		methods: {
			initPremisesCityList:function(){
				var _self = this;
				var body = {};
				body.params = {};
				var url = this.utilHelper.apiUrl+'/api/getPremisesCityList';
				_self.$http.post(url,body).then((response)=>{
					var body = response.body;
					if(body.result==1){
						_self.PremisesCityList = body.resData.premisesCityResDtoList;
					}else{
						layer.msg("数据获取失败");
					}
				});

			},
			gapBetween:function() {
				var wHeight = $(window).height()-50;
			 	var sHeight = (wHeight-30)/26;
			 	$(".quick-label a").css({"height":sHeight+"px","line-height":sHeight+"px"})
			},
			goAnchor(selector) {
		        var anchor = this.$el.querySelector(selector)
		        document.body.scrollTop = anchor.offsetTop
		    },
		    goToIndex(num,cityName){
		    	this.$router.push({name: 'indexPage', params: {cityId:num,cityName:cityName}})
		    }
		}
	}
</script>